<template>
  <div class="aside" ref="aside" v-if="hasList" @click="clickList">
    <div class="accountBox">
      <div class="info" v-if="!login" @click="goLogin">
        <div class="thumb">
          <div class="avatarImg"></div>
        </div>
        <div class="data">
          <h4>登录/注册</h4>
        </div>
      </div>
      <div class="info" v-if="login" @click="goCenter">
        <div class="thumb" v-if="userInfo && userInfo.vipheadphoto">
          <div class="userImg">
            <img :src="userInfo.vipheadphoto" class="uImg"/>
          </div>
        </div>
        <div class="thumb" v-else>
          <div class="avatarImg"></div>
        </div>
        <div class="data" v-if="userInfo == null">
          <h4>昵称</h4>
        </div>
        <div class="data" v-else>
          <h4>{{userInfo.vipname}}</h4>
        </div>
      </div>
    </div>
    <div class="roomsList">
      <div class="wrapper">
        <ul>
          <li class="background-transparent-darker-hover" v-for="(item, index) in showList" @click="jumpClick(item)"
              :key="index">
            <a class="open-room" :class="item.class" :title="item.name">
              <i class="icon-outbound" aria-label=""></i>
              <span class="name"><i class="fa" :class="item.iconStyle"></i> &nbsp;{{item.name}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
  import axios from 'axios';
  import Api from "../../api/cjy-api";
  import {mapState, mapGetters, mapMutations} from 'vuex';
  import checkCssStyleCompatibility from "../../utils/checkCssStyleCompatibility.js";
  import router from '../../router';
  export default {
    props: {
      detail: {
        type: Boolean,
        default: false
      },
      delivery: {
        type: Boolean,
        default: false
      },
      hasList: {
        type: Boolean,
        default: true
      },
      hasCart: {
        type: Boolean,
        default: true
      },
      hasBack: {
        type: Boolean,
        default: false
      },
      hasLogo: {
        type: Boolean,
        default: true
      },
    },
    data () {
      return {
        flag: true,
        list: [
          {
            name: "商城首页",
            url: "home",
            class: "class_a",
            iconStyle: "icon njfont nj-shangcheng"
          },
          {
            name: "商品分类",
            url: "classify",
            class: "class_a",
            iconStyle: "icon njfont nj-fenlei"
          }
        ],
        // classifyList:[],
        restList: [
          // {
          //   name: "超值促销",
          //   url: "regularmeal",
          //   class: "class_a ",
          //   iconStyle: "icon njfont nj-cuxiao"
          // },
          {
            name: "购物车",
            url: "cart",
            class: "class_a",
            iconStyle: "icon njfont nj-gouwuche"
          }, {
            name: "个人中心",
            url: "profile",
            class: "class_a",
            iconStyle: "icon njfont nj-wode"
          }, {
            name: " 我的订单",
            url: "order",
            iconStyle: "level_menu fa fa-angle-right"
          }, {
            name: " 我的收藏",
            url: "collect",
            iconStyle: "level_menu fa fa-angle-right"
          }, {
            name: " 我的消息",
            url: "myMessage",
            iconStyle: "level_menu fa fa-angle-right"
          }
        ],
      }
    },
    computed: {
      ...mapGetters('wxh', {
        login: "login",
        userInfo: 'userInfo',
        sessionId: 'sessionId'
      }),
      // ...mapGetters('cjy', {
      //   classifyData: 'classifyData'
      // }),
      showList () {
        // return this.list.concat(this.classifyList).concat(this.restList)
        return this.list.concat(this.restList)
      }
    },
    components: {},
    beforeCreate () {
      // if (!this.$store.getters['cjy/classifyData']) {
      //   this.$store.dispatch('cjy/queryClassifyList')
      // }

      // if(!this.$store.state["wxh"].login){
      //   this.$store.dispatch("wxh/getUserInfo");
      // };
    },
    created(){
       this.initData();
    },
    async mounted(){
      PSEvent.trigger("doOfflineAsideEvents");
      await this.reFreshUserInfo(this);
      // var data  = this.classifyData
      // if (data) {
      //   this.goodsList(data)
      // }
    },
    methods: {
      ...mapMutations('wxh',[
        'USER_INFO',
        'LOGO_OUT',
        'LOGO_IN'
      ])
      ,
      async initData() {
        if (!this.login) {
          this.username = '登录/注册';
          return
        }
        await this.reFreshUserInfo(this);
      },
      clickList(){
        var burgers = document.getElementsByClassName("burgers");
        var container = document.getElementsByClassName("home-container")[0];
        let shade = document.querySelector("#shadeBlock");
        if(shade){
          container.removeChild(shade);
        }
        if (burgers.length != 0) {
          burgers[0].classList.remove("burgers0");
          burgers[1].classList.remove("burgers1");
          burgers[2].classList.remove("burgers2");
        }
        var list = document.getElementsByClassName("aside")[0];
        var userAgent = navigator.userAgent;
        var index = userAgent.indexOf("Android")
        if(index >= 0){
          var androidVersion = parseFloat(userAgent.slice(index+8));
          if(androidVersion < 4.5){
            container.style.left = "0px";
            list.style.left = "-260px";
          }else{
            container.style.transform = "translateX(0px)";
            list.style.transform = "translateX(-260px)";
          }
        } else {
          container.style.transform = "translateX(0px)";
          list.style.transform = "translateX(-260px)";
        }
      },
      goodsList(data){
        var arr = []
        // data.map((item) => {
        //   if (item.parentclasscode == '1') {
        //     arr.push({
        //       url: 'goodsClassify?code=' + item.goodsclasscode,
        //       iconStyle: "level_menu fa fa-angle-right",
        //       name: ' ' + item.goodsclassname
        //     })
        //   }
        // })

        // this.classifyList = arr
      },

      jumpClick (item){
        var u = navigator.userAgent;
        var isXiangpu = u.indexOf("xiangpu") > -1;         //判断是否在象谱内打开
        if (!item.url) {
          alert(item.url);
        }
        else if (item.url == 'order' || item.url == 'car' || item.url == 'collect' || item.url == 'news' || item.url == 'discount' || item.url == 'myMessage' || item.url == 'cart') {
          if (!this.sessionId) {
            if(item.url == 'cart' && !isXiangpu){
              location.href = location.href.split('H5')[0] + 'download/index.html';
              return false;
            }
            console.log('322332')
            this.$router.push("login")
            return
          }
          this.$router.push({path: item.url, query: {orderStatus: 0}})
        } else {
          this.$router.push({path: item.url})
        }
      },
      /* queryErpCate() {
        let self = this
        axios.get(api.mall_goods_host + 'goodsclass/getgoodsclasslist?enterpriseid=' + api.enterpriseId).then((res) => {
          if (res.data.data) {
            let cateList = res.data.data[0]
            self.CATE_LIST(cateList)
            let arr = []
            cateList.map((item) => {
              if (parseInt(item.goodsclasscode) < 1000 && item.goodsclasscode !== '1') {
                arr.push({
                  url: 'goodsclass/' + item.goodsclasscode,
                  iconStyle: "level_menu fa fa-angle-right",
                  name: ' ' + item.goodsclassname
                })
              }
            })
            self.menuCofig = self.menuCofig.concat(arr).concat(self.restList)
            console.log(self.menuCofig, 'self.menuCofig');
          } else {
            console.log("这次请求没有拿到数据");
          }
        });
      },*/
      isLogin(){
        // if (this.userInfo) {
        this.$router.push({path: 'profile'})
        // }
      },
      goLogin(){
        this.$router.push({path: 'login?page=xx'})
      },
      goCenter(){
        this.$router.push({path: "profile"})
      }
    },
    watch: {
      $route () {
        this.clickList()
      }
      // classifyData (data) {
      //   if (data) {
      //     this.goodsList(data)
      //   }
      // }
    }
  }
</script>
<style>

  .aside {
    position: absolute;
    top: 0;
    height: 100%;
    bottom: 0;
    left: 0;
    width: 260px;
    transition: transform 0.5s ease-out 0.1s;
    transform: translateX(-260px);
    overflow: visible;
    z-index: 100;
  }

  .accountBox {
    height: 3rem;
    cursor: pointer;
    width: 100%;
    background: #404040;
  }

  .roomsList {
    direction: rtl;
    position: absolute;
    top: 3rem;
    bottom: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    padding-top: 15px;
    z-index: 9999;
    background-color: #464646;
  }

  .roomsList > .wrapper {
    direction: ltr;
    padding-left: 8px;
    padding-bottom: 1em;
    position: relative;
  }

  .roomsList > .wrapper > ul {
    position: relative;
  }

  .info {
    position: relative;
    height: 100%;
    padding: 10px 0 10px 18px;
    z-index: 100;
  }

  .thumb {
    float: left;
    position: relative;
    width: 42px;
    height: 42px;
  }

  .thumb::after {
    content: " ";
    display: block;
    width: 8px;
    height: 8px;
    z-index: 10;
    position: absolute;
    border-radius: 4px;
    top: 18px;
    left: -14px;
  }

  .avatarImg {
    width: 100%;
    height: 100%;
    background: url(../../../static/image/user4.png) no-repeat 100% 100%;
    background-size: cover;
    border-radius: 4px;
  }

  .userImg {
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 4px;
  }

  .data {
    float: left;
    padding: 0 25px 0 10px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    width: calc(100% - 60px);
    color: rgba(255, 255, 255, 0.6);
  }

  .open-room {
    padding: 8px 46px 8px 6px;
    height: 1.8rem;
    display: block;
    border-radius: 2px 0 0 2px;
    font-size: .75rem;
    position: relative;
    line-height: .75rem;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    text-align: left;
  }

  .class_a {
    font-weight: 500;
    color: #e1e1e1;
  }

  .wrapper > ul > li > a > i {
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.3);
  }

  .uImg {
    width: 100%;
    height: 100%;
  }

  .name i {
    color: #7C7B7C;
  }
</style>
